<template>
  <div class="health-detail">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <div class="header-back" @click="router.back()">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.59-4.59z"/>
          </svg>
        </div>
        <div>
          <h2>健康数据详情</h2>
          <p class="header-subtitle">查看老人的详细健康信息</p>
        </div>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="main-content">
      <div v-if="loading" class="loading-card">
        <div class="spinner"></div>
        <p>正在加载健康数据...</p>
      </div>
      
      <div v-else class="detail-grid">
        <!-- 基本信息卡片和健康指标卡片并排 -->
        <div class="info-card">
          <div class="card-header primary">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
              </svg>
            </div>
            <h3>基本信息</h3>
          </div>
          
          <div class="card-content">
            <div class="info-grid">
              <div class="info-item">
                <div class="item-icon">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                    <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                  </svg>
                </div>
                <div class="item-content">
                  <span class="label">老人姓名</span>
                  <span class="value">{{ healthData.elderName }}</span>
                </div>
              </div>
              
              <div class="info-item">
                <div class="item-icon">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                    <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/>
                    <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>
                  </svg>
                </div>
                <div class="item-content">
                  <span class="label">记录时间</span>
                  <span class="value">{{ healthData.createTime }}</span>
                </div>
              </div>
              
              <div class="info-item">
                <div class="item-icon">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                  </svg>
                </div>
                <div class="item-content">
                  <span class="label">位置</span>
                  <span class="value">{{ healthData.location }}</span>
                </div>
              </div>
              
              <div class="info-item">
                <div class="item-icon">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
                    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
                  </svg>
                </div>
                <div class="item-content">
                  <span class="label">预警等级</span>
                  <span :class="['alert-tag', getAlertClass(healthData.alertLevel)]">
                    {{ getAlertText(healthData.alertLevel) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 健康指标卡片 -->
        <div class="info-card">
          <div class="card-header secondary">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                <path d="M10.5 6h3v12h-3V6zm-2 12v-4H5v4H3v-6h5v4zm8 0h-3v-8h3v8zm2-10h-5v2h5v-2z"/>
              </svg>
            </div>
            <h3>健康指标</h3>
          </div>
          
          <div class="card-content">
            <div class="health-grid">
              <div class="health-item">
                <div class="health-icon heart">
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                  </svg>
                </div>
                <div class="health-content">
                  <span class="label">心率</span>
                  <span class="value">{{ healthData.heartRate }} <span class="unit">次/分</span></span>
                </div>
              </div>
              
              <div class="health-item">
                <div class="health-icon oxygen">
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M12 2c1.1 0 2 .9 2 2 0 .74-.4 1.38-1 1.73v.77c0 .28.22.5.5.5s.5-.22.5-.5v-.27c.74.35 1.2 1.19 1.2 2.09 0 1.1-.9 2-2 2s-2-.9-2-2c0-.9.46-1.74 1.2-2.09v-.27c0-.28.22-.5.5-.5s.5.22.5.5v.27c-.6-.35-1-.99-1-1.73 0-1.1.9-2 2-2zm0-2C8.14 0 5 3.14 5 7c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                  </svg>
                </div>
                <div class="health-content">
                  <span class="label">血氧</span>
                  <span class="value">{{ healthData.bloodOxygen }} <span class="unit">%</span></span>
                </div>
              </div>
              
              <div class="health-item">
                <div class="health-icon pressure">
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                  </svg>
                </div>
                <div class="health-content">
                  <span class="label">血压</span>
                  <span class="value">{{ healthData.bloodPressure }} <span class="unit">mmHg</span></span>
                </div>
              </div>
              
              <div class="health-item">
                <div class="health-icon sleep">
                  <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
                  </svg>
                </div>
                <div class="health-content">
                  <span class="label">睡眠质量</span>
                  <span class="value">{{ healthData.sleepQuality }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- AI 建议卡片 - 放在下方 -->
        <div class="info-card" style="grid-column: span 2;">
          <div class="card-header ai">
            <div class="header-icon">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-2-13h4v4h-4V7zm0 6h4v2h-4v-2z"/>
              </svg>
            </div>
            <h3>AI 健康建议</h3>
            <!-- 修改按钮点击事件 -->
            <button @click="generateAIAdviceStream" class="refresh-btn" :disabled="generatingAdvice">
              <svg v-if="!generatingAdvice" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
                <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/>
              </svg>
              <div v-else class="spinner-small"></div>
              {{ generatingAdvice ? '生成中...（流式传输）' : '重新生成' }}
            </button>
          </div>
          
          <div class="card-content">
            <div v-if="aiAdvice" class="ai-advice-content">
              <div class="ai-advice-text" v-html="formatAdvice(aiAdvice)"></div>
            </div>
            <div v-else class="ai-advice-placeholder">
              <p>{{ generatingAdvice ? '正在生成AI健康建议，请耐心等待...' : '点击"重新生成"获取AI健康建议' }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import request from '../../utils/request'

const route = useRoute()
const router = useRouter()
const loading = ref(true)
const healthData = ref({})
const aiAdvice = ref('')
const generatingAdvice = ref(false)

// 获取预警等级样式
const getAlertClass = (level) => {
  switch (level) {
    case 'YELLOW': return 'warning'
    case 'RED': return 'danger'
    default: return 'normal'
  }
}

// 获取预警等级文本
const getAlertText = (level) => {
  switch (level) {
    case 'YELLOW': return '警告'
    case 'RED': return '危险'
    default: return '正常'
  }
}

// 获取健康数据详情
const getHealthDetail = async (dataId) => {
  // 这个函数现在只在没有传递数据时才会被调用
  loading.value = true
  try {
    const res = await request.get(`/community/healthData/${dataId}`)
    if (res.code === 1) {
      healthData.value = res.data
    }
  } catch (error) {
    console.error('获取健康数据详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 流式调用AI服务
const generateAIAdviceStream = async () => {
  generatingAdvice.value = true
  aiAdvice.value = '' // 清空之前的内容
  
  try {
    // 使用EventSource进行流式请求
    const dataId = route.params.dataId
    const eventSource = new EventSource(`/api/ai/health-advice-stream/${dataId}`)
    
    eventSource.onmessage = (event) => {
      // 处理普通消息（如果有的话）
      aiAdvice.value += event.data
    }
    
    eventSource.addEventListener('data', (event) => {
      // 逐步添加AI建议内容
      aiAdvice.value += event.data
    })
    
    eventSource.addEventListener('complete', () => {
      // 流式传输完成
      eventSource.close()
      generatingAdvice.value = false
    })
    
    eventSource.addEventListener('error', (event) => {
      // 处理错误
      console.error('流式传输错误:', event)
      eventSource.close()
      generatingAdvice.value = false
      
      // 回退到普通API调用
      generateAIAdvice()
    })
    
    // 设置超时处理
    setTimeout(() => {
      if (eventSource.readyState !== EventSource.CLOSED) {
        eventSource.close()
        generatingAdvice.value = false
        if (!aiAdvice.value) {
          // 如果还没有收到任何数据，回退到普通API调用
          generateAIAdvice()
        }
      }
    }, 60000) 
    
  } catch (error) {
    console.error('初始化流式传输失败:', error)
    // 回退到普通API调用
    generateAIAdvice()
  }
}

// 保留原来的普通API调用方法
const generateAIAdvice = async () => {
  generatingAdvice.value = true
  try {
    // 增加超时时间到30秒（30000毫秒）
    const res = await request.post('/api/ai/health-advice', {
      elderName: healthData.value.elderName || '未知',
      heartRate: healthData.value.heartRate || '未知',
      bloodOxygen: healthData.value.bloodOxygen || '未知',
      bloodPressure: healthData.value.bloodPressure || '未知',
      sleepQuality: healthData.value.sleepQuality || '未知',
      alertLevel: healthData.value.alertLevel || '未知'
    }, {
      timeout: 60000 // 设置30秒超时时间
    })
    
    if (res.code === 1 && res.data) {
      aiAdvice.value = res.data
    } else {
      throw new Error(res.message || 'API返回格式不正确')
    }
  } catch (error) {
    console.error('调用AI服务失败:', error)
    // 回退到本地生成的建议
    try {
      const advice = generateHealthAdvice(healthData.value)
      aiAdvice.value = advice
    } catch (localError) {
      console.error('生成本地建议失败:', localError)
      aiAdvice.value = '抱歉，暂时无法生成健康建议，请稍后重试。'
    }
  } finally {
    generatingAdvice.value = false
  }
}

// 格式化建议文本（添加换行）
const formatAdvice = (advice) => {
  return advice.replace(/\n/g, '<br>')
}

// 基于健康数据生成建议的函数
const generateHealthAdvice = (data) => {
  const suggestions = []
  
  // 心率分析
  const heartRate = parseInt(data.heartRate)
  if (heartRate) {
    if (heartRate < 60) {
      suggestions.push('心率偏低：正常成人静息心率应在60-100次/分之间。建议适当增加身体活动，如散步等轻度运动，但要避免剧烈运动。如有不适请及时就医。')
    } else if (heartRate > 100) {
      suggestions.push('心率偏高：可能存在心律不齐或心脏负荷过重的情况。建议减少剧烈活动，保持情绪稳定，保证充足睡眠。如持续偏高应尽快就医检查。')
    } else {
      suggestions.push('心率正常：继续保持良好的生活习惯，定期监测心率变化。')
    }
  }
  
  // 血氧分析
  const bloodOxygen = parseFloat(data.bloodOxygen)
  if (bloodOxygen) {
    if (bloodOxygen < 95) {
      suggestions.push('血氧饱和度偏低：正常值应在95%以上。建议到空气流通的地方深呼吸，如持续偏低应立即就医。')
    } else {
      suggestions.push('血氧饱和度正常：继续保持良好的呼吸习惯，定期到户外活动。')
    }
  }
  
  // 血压分析 - 添加类型检查
  if (data.bloodPressure) {
    // 确保 bloodPressure 是字符串类型
    const pressureStr = String(data.bloodPressure)
    const pressures = pressureStr.split('/')
    
    if (pressures.length === 2) {
      const systolic = parseInt(pressures[0])  // 收缩压
      const diastolic = parseInt(pressures[1]) // 舒张压
      
      if (systolic >= 140 || diastolic >= 90) {
        suggestions.push('血压偏高：可能存在高血压风险。建议低盐饮食，控制情绪，适量运动，定期监测血压。如持续偏高应尽快就医。')
      } else if (systolic < 90 || diastolic < 60) {
        suggestions.push('血压偏低：可能存在低血压风险。建议适当增加盐分摄入，避免突然站起，保持充足水分。')
      } else {
        suggestions.push('血压正常：继续保持健康的生活方式，定期监测血压变化。')
      }
    } else {
      suggestions.push('血压数据格式异常，请检查数据准确性。')
    }
  }
  
  // 睡眠质量分析
  if (data.sleepQuality) {
    const sleepQuality = String(data.sleepQuality)
    if (sleepQuality.includes('差') || sleepQuality.includes('非常差')) {
      suggestions.push('睡眠质量不佳：建议保持规律作息，睡前避免刺激性活动，创造安静舒适的睡眠环境。可尝试睡前热水泡脚或听轻音乐帮助入睡。')
    } else if (sleepQuality.includes('一般')) {
      suggestions.push('睡眠质量一般：可以进一步优化睡眠环境和睡前习惯，保持规律作息时间。')
    } else {
      suggestions.push('睡眠质量良好：继续保持规律的作息习惯，这对身体健康非常重要。')
    }
  }
  
  // 预警等级建议
  if (data.alertLevel === 'YELLOW') {
    suggestions.push('⚠️ 严重警告：您的健康指标存在严重异常，请立即联系医护人员或家属，并尽快就医检查。')
  } else if (data.alertLevel === 'RED') {
    suggestions.push('⚠️ 健康警告：您的健康指标存在异常，请密切关注身体状况，必要时及时就医。')
  }
  
  // 通用建议
  suggestions.push('日常保健建议：\n1. 保持均衡饮食，多吃蔬菜水果，控制盐分和油脂摄入\n2. 适量运动，如散步、太极拳等\n3. 保持心情愉快，避免情绪波动\n4. 定期体检，监测各项健康指标\n5. 按时服药，遵医嘱治疗')
  
  return suggestions.join('\n\n')
}

onMounted(() => {
  // 首先尝试从 sessionStorage 获取数据
  const storedData = sessionStorage.getItem('healthDataDetail');
  const dataId = route.params.dataId;
  
  if (storedData) {
    // 使用存储的数据
    healthData.value = JSON.parse(storedData);
    // 清除已使用的数据（可选，根据业务需求决定是否立即清除）
    // sessionStorage.removeItem('healthDataDetail');
    loading.value = false;
    
    // 自动生成AI建议
    generateAIAdvice()
  } else if (dataId) {
    // 如果没有存储数据但有ID，则从后端获取（后备方案）
    getHealthDetail(dataId);
  } else {
    console.error('未找到有效的数据ID或数据');
    loading.value = false;
  }
})
</script>
<style scoped>
.health-detail {
  padding: 24px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e6f2ff 100%);
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 20px;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #f1f3f4;
  cursor: pointer;
  transition: all 0.3s ease;
}

.header-back:hover {
  background: #e3f2fd;
  transform: translateX(-2px);
}

.header-back svg {
  color: #5f6368;
}

.page-header h2 {
  font-size: 24px;
  color: #2c3e50;
  margin: 0 0 4px 0;
}

.header-subtitle {
  margin: 0;
  color: #7f8c8d;
  font-size: 14px;
}

.main-content {
  max-width: 1800px;
  margin: 0 auto;
}

.loading-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e9ecef;
  border-top: 4px solid #4facfe;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

.spinner-small {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top: 2px solid #4facfe;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-card p {
  margin: 0;
  color: #6c757d;
  font-size: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 24px;
}

.info-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  overflow: hidden;
}

.card-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}

.card-header.primary {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.card-header.secondary {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.card-header.ai {
  background: linear-gradient(135deg, #6a93cb 0%, #a4bfef 100%);
  justify-content: space-between;
}

.header-icon {
  width: 24px;
  height: 24px;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  flex: 1;
}

.refresh-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

.refresh-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.refresh-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.card-content {
  padding: 24px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: #f8f9fa;
  transform: translateY(-2px);
}

.item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e3f2fd;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4facfe;
  flex-shrink: 0;
}

.item-content {
  flex: 1;
}

.label {
  display: block;
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 500;
}

.value {
  display: block;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 500;
}

.alert-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.alert-tag.normal {
  background: #e8f7ef;
  color: #28a745;
}

.alert-tag.warning {
  background: #fff3cd;
  color: #856404;
}

.alert-tag.danger {
  background: #f8d7da;
  color: #721c24;
}

.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.health-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.health-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

.health-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

.health-icon.heart {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
}

.health-icon.oxygen {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.health-icon.pressure {
  background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
}

.health-icon.sleep {
  background: linear-gradient(135deg, #6a93cb 0%, #a4bfef 100%);
}

.health-content {
  flex: 1;
}

.health-content .label {
  display: block;
  color: #7f8c8d;
  font-size: 14px;
  margin-bottom: 4px;
  font-weight: 500;
}

.health-content .value {
  display: block;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.unit {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 400;
}

/* AI 建议样式 */
.ai-advice-content {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  border-left: 4px solid #6a93cb;
  max-height: 400px;
  overflow-y: auto;
}

.ai-advice-text {
  color: #2c3e50;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.ai-advice-placeholder {
  text-align: center;
  padding: 40px 20px;
  color: #7f8c8d;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-advice-placeholder p {
  margin: 0;
  font-style: italic;
}

@media (max-width: 768px) {
  .health-detail {
    padding: 16px;
  }
  
  .detail-grid {
    grid-template-columns: 1fr;
  }
  
  .info-grid,
  .health-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header h2 {
    font-size: 20px;
  }
  
  .health-item {
    padding: 12px;
  }
  
  .card-header.ai {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .refresh-btn {
    align-self: flex-end;
  }
}
</style>